<template>
  <div class="echart-line-container">
    <div
      ref="chart"
      style="width: 100%; height: 100%"
    ></div>
    <div class="echart-line-compnent">
      <el-date-picker
        popper-class="echart-data"
        class="echart-device-history-time"
        style="width: 200px"
        size="mini"
        prefix-icon="icon-remove"
        clear-icon="icon-remove"
        v-model="modulePickTime"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :picker-options="pickerOptions"
        @change="logTime"
      ></el-date-picker>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
export default {
  props: {
    dataSetSource: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      myChart: null,
      alarmTypeName: [{ alarmType: 'alart' }, { alarmType: 'alarm' }],
      grid: {},
      legend: {
        bottom: 0,
        textStyle: {
          color: '#66769b'
        }
      },
      modulePickTime: [],
      start: '',
      end: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
          // {
          //   text: '最近一年',
          //   onClick(picker) {
          //     const end = new Date();
          //     const start = new Date();
          //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
          //     picker.$emit('pick', [start, end]);
          //   }
          // }
        ]
      }
    };
  },
  mounted() {
    // if (this.$refs.chart.clientWidth < 455) {
    //   this.legend = {
    //     textStyle: {
    //       color: '#66769b'
    //     },
    //     orient: 'vertical',
    //     top: '50px',
    //     left: '0'
    //   };
    //   this.grid = {
    //     left: 100
    //   };
    // }
    this.defaultShow();
    window.addEventListener('resize', this.onResize);
  },
  methods: {
    defaultShow() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24);
      this.start = start;
      this.end = end;
      this.modulePickTime = [this.start, this.end];
      this.$emit('getData', this.start, this.end);
    },
    transformTime(value) {
      const d = new Date(value);
      const datetime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
      return moment(datetime).utc().format();
    },
    logTime() {
      this.start = this.transformTime(this.modulePickTime[0]);
      this.end = this.transformTime(this.modulePickTime[1]);
      this.$emit('getData', this.start, this.end);
    },
    judgeData() {
      if (this.dataSetSource.length == 0) return this.alarmTypeName;
      else return this.dataSetSource;
    },
    onResize() {
      this.myChart.resize();
    },
    getEchartData() {
      const chart = this.$refs.chart;
      this.myChart = echarts.init(chart);
      if (chart) {
        const option = {
          grid: this.grid,
          title: {
            text: '安全风险曲线',
            top: '10px',
            left: '10px',
            textStyle: {
              color: '#636985'
            }
          },
          legend: this.legend,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          // dataset: {
          //   source: this.dataSetSource
          // },
          xAxis: {
            type: 'time',
            nameTextStyle: { color: '#000' },
            axisLine: {
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000'
              }
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            gridIndex: 0,
            name: '次数',
            nameGap: 10,
            nameTextStyle: { color: '#000' },
            axisLine: {
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000'
              }
            },
            splitLine: {
              show: false
            }
          },
          series: this.judgeData().map(line => {
            return {
              symbol: 'none',
              name: line.alarmType == 'alert' ? '预警' : '告警',
              type: 'line',
              data: line.historyList ? line.historyList.map(item => [item.created_at, item.count]) : [],
              smooth: true,
              legend: {
                show: true
              },
              label: {
                show: false,
                color: '#000'
              },
              itemStyle: {
                color: line.alarmType == 'alert' ? '#ffc300' : '#ff5959'
              }
            };
          })
        };
        this.myChart.setOption(option, true);
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize);
  }
};
</script>

<style lang="scss" scoped>
.echart-line-container {
  position: relative;
  .echart-line-compnent {
    position: absolute;
    padding: 10px 10px 0 0;
    top: 0;
    right: 0;
    width: 83%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
</style>

<style lang="scss">
.echart-device-history-time {
  /deep/.el-input__icon {
    display: none !important;
  }
}
.icon-remove {
  display: none;
}
</style>
